@charset "utf-8";
/* CSS Document */
*{
	margin:0;
	padding:0;}
a{
	text-decoration:none;
	-webkit-user-select:none;}
.hander{
	
	width:100%;
	height:65px;
	}
.hander>h1{
	float:left;
	margin-left:10px;
	line-height:65px;
	color:#fff;
	opacity:0.6}
.hander>h1:hover{
	opacity:1;}	
.hander>.hander_log{
	float:right;
	list-style:none;}
.hander>.hander_log>li{
	float:left;
	margin-right:10px;
	color:#FFF;
	line-height:65px;
	opacity:0.6;

	}
.hander>.hander_log>li>a{
	color:#FFF;}
.hander>.hander_log>li:hover{
	
	opacity:1;}
.content{
	
	width:100%;
	height:480px;;
	}
.content .contentIn{
	height:450px;
	width:1200px;
	margin:0 auto;
	}
.contentIn .contentIn_left{
	float:left;
	width:800px;
	height:100%;
/*	background-color:#999;*/
	overflow:auto;
	}
	.contentIn_left .contentIn_nav{
		width:100%;
		color:#FFF;
		height:50px;
		/*background-color:#000;*/
		}
	.contentIn_left .contentIn_nav span{
        margin-top:5px;
		display:inline-block;
		width:130px;
		height:40px;
		border:1px solid #FFF;
		box-sizing:border-box;
		margin-left:5px;
		text-align:center;
		line-height:40px;
		border-radius:10px;
		opacity:0.5;
		}
	.contentIn_left .contentIn_nav span:hover{
		opacity:1;
		}
	.contentIn_left .contentIn_nav span i{
		display:inline-block;
		width:17px;
		height:14px;
		background:url("images/icon_sprite.png") no-repeat 0 0;
		margin-right:4px;
        
		}
		.contentIn_left .contentIn_nav span:nth-child(1) i{
			background:url("images/icon_sprite.png") no-repeat ;
			background-position:-60px 0;
           
			}
		.contentIn_left .contentIn_nav span:nth-child(2) i{
			background:url("images/icon_sprite.png") no-repeat -20px 0;

			}
		.contentIn_left .contentIn_nav span:nth-child(3) i{
			background:url("images/icon_sprite.png") no-repeat -42px -218px;

			}
		.contentIn_left .contentIn_nav span:nth-child(4) i{
			background:url("images/icon_sprite.png") no-repeat -101px 0;

			}
		.contentIn_left .contentIn_nav span:nth-child(5) i{
			background:url("images/icon_sprite.png") no-repeat -118px 0;

			}
	.contentIn_left .musicList{
		width:100%;
		color:#FFF;
		height:400px;
		/*background-color:#cf3;*/
		
		}
	.musicList ul li.listtop{
		width:100%;
		height:50px;
		/*background-color:#CF3;*/
		list-style:none;
        line-height:50px;
		border-bottom:1px  solid #666;
		-webkit-user-select:none;
		opacity:0.5;
	}
	.listtop div{
		float:left;}
	.listtop .music_check{
		
		width:50px;
		height:100%;
		
		text-align:center;
		}
		.listtop .music_check span{
			display:inline-block;
			width:25px;
			height:25px;
			border:1px solid #FFF;
			box-sizing:border-box;
			margin-top:10px;
			
			}
	.listtop .music_num{
		height:100%;
		width:40px;
	
		}
	.listtop .music_name{
		width:55%;
		height:100%;
		
	
		}
	.listtop .music_singer{
		width:120px;
		height:100%;
		}
	
 .contentIn .contentIn_right{
	float:right;
	width:400px;
	height:100%;
	/*background-color:#993;*/
	
	}
	
.musicList ul li.listall{
		width:100%;
		height:50px;
	/*	background-color:#CF3;*/
		list-style:none;
        line-height:50px;
		border-bottom:1px solid #999;
		-webkit-user-select:none;
		}
	.listall>div{
		float:left;
		color:rgba(255,255,255,0.5);
	
		}
	.listall .music_check{
		
		width:50px;
		height:100%;
		
		text-align:center;
		}
		.listall .music_check>span{
			display:inline-block;
			width:14px;
			height:14px;
			border:1px solid #FFF;
			box-sizing:border-box;
			margin-top:20px;
			opacity:0.5;
			
			}
			
		.listall .checkimg >span{
			background:url(images/icon_sprite.png) no-repeat -21px -185px;
			opacity:1;
			}
	.listall .music_num{
		height:100%;
		width:40px;
		}
	.listall .music_num2{
		
		background:url(images/wave.gif) no-repeat 0 center;
		color:transparent !important;}
	.listall .music_name{
		width:55%;
		height:100%;
	
		}
	.listall .music_name .music_log a{
		display:inline-block;
		
		}
	.listall .music_name .music_log {
		float:right;	
		display:none;
		margin-right:5px;
		
		}
		.listall .music_name .music_log li {
	 list-style:none;
	 }
	
	.music_log ul span{
		margin-top:5px;
		display:inline-block;
		
		}

.music_log ul span li a{
	width:35px;
	height:35px;
	display:inline-block;

	

	}

	.music_log .play{
		background:url(images/icon_list_menu.png) no-repeat -0px -0px;
	width:36px;
	height:36px;
		
		}
	.music_log .play2{
		background:url(images/icon_list_menu.png) no-repeat -120px -200px;
	width:36px;
	height:36px;
	
		
		}
.music_log ul span:nth-child(1) li{
	opacity:0.5;
	width:36px;
	height:36px;
	
	}
.music_log ul span:nth-child(1) li:hover{
	opacity:1;}
.music_log ul span:nth-child(2) li{
	background:url(images/icon_list_menu.png) no-repeat 0px -80px;
	width:36px;
	height:36px;
	opacity:0.5;
	
	}
.music_log ul span:nth-child(2) li:hover{
	opacity:1;}
.music_log ul span:nth-child(3) li{
	background:url(images/icon_list_menu.png) no-repeat 0px -120px;
	width:36px;
	height:36px;
	padding-right:2px;
	opacity:0.5;
	
	}
.music_log ul span:nth-child(3) li:hover{
	opacity:1;}
.music_log ul span:nth-child(4) li{
	background:url(images/icon_list_menu.png) no-repeat 0px -40px;
	width:36px;
	height:36px;
	opacity:0.5;
	
	}
.music_log ul span:nth-child(4) li:hover{
	opacity:1;}
		
	.listall .music_singer{
		width:120px;
		height:100%;
		overflow:hidden;
		}
	.music_times>a{
		margin-top:5px;
		display:inline-block;
		width:36px;
	     height:36px;
		float:left;
	    margin-left:10px;
		display:none;
		background:url("images/icon_list_menu.png") no-repeat 0px -160px;
		opacity:0.5;
		}
	.music_times a:hover{
		opacity:1;}
	
	
 .contentIn .contentIn_right{
	float:right;
	width:400px;
	height:100%;
	/*background-color:#993;*/
	-webkit-user-select:none;
	
	}
	.contentIn_right .song_info{
		line-height:35px;
		text-align:center;
		color:rgba(255,255,255,0.8);
		}
	
	.song_info>img{
		width:188px;
		height:184px;
		box-shadow:1px 2px 3px #FFFFCC;
		}
		.song_playinfo_name{
			float:left;}
		.song_playinfo_time{
			float:right;}	
		
	.song_info .song_name>a:hover{
		opacity:0.5;}
	.song_info .song_singer>a:hover{
		opacity:0.5;}
	.song_info .song_album>a:hover{
		opacity:0.5;}
		
	.contentIn_right .song_contentBox{
		
		width:100%;
		height:150px;
		overflow:hidden;
		opacity:0.8;
		
	   
		margin-top:30px;
		
	
		}
.contentIn_right .song_content{
		
		text-align:center;
		color:rgba(248,248,248,1);
		
		font-weight:400;
		
	
		}
		
	.song_content>li{
		list-style:none;
		line-height:30px;
		
		}
	.song_content .cur{
	      color:#3CF;
	    }
	
	.footer{
	
	width:100%;
	height:100px;
	position:absolute;
	bottom:0;
	left:0;
	-webkit-user-select:none;
	/*background-color:#69F;*/
	position:relative;
	}
.footer .footerIn{
	height:100px;
	width:1200px;
	margin:0 auto;
/*	background-color:#666;*/
    line-height:100px;
	position:relative;
	}
	.footer .footerIn a{
		margin-left:34px;
		-webkit-user-select:none;
		
		}
	.footer .footerIn>.play_next{
		
		margin-right:40%;}
  .footerIn>.play_last{
	  width:23px;
	  height:22px;
	  display:inline-block;
	 
	  background:url(images/player@2x.png);
	 
	  background:-webkit-image-set(url("images/player@2x.png")2x) ;
	
	 background-position: 0px -30.5px;
	  }
   .footerIn>.playing {
	  width:21px;
	  height:29px;
	  
	  display:inline-block;
	  background:url(images/player@2x.png);
	  background:-webkit-image-set(url("images/player@2x.png")2x);
	  background-position:0 0;
	  vertical-align:-4px;}
	  .playing_change{
		  width:21px;
	  height:29px;
	  display:inline-block;
	  margin-top:-5px;
	  background:url(images/player@2x.png);
	  background:-webkit-image-set(url("images/player@2x.png")2x);
	  background-position:-30px -2px;
	  vertical-align:-4px;
		  
		  }
	  
	  .footerIn >.play_next {
	  width:19px;
	  height:20px;
	  display:inline-block;
	  background:url(images/player@2x.png);
	  background:-webkit-image-set(url("images/player@2x.png")2x) ;
	  background-position:  0px -52px;}
	    .footerIn .song_playinfo{
			
			width:420px;
			height:30px;
			/*background-color:#F00;*/
			line-height:30px;
			position:absolute;
			margin-top:15px;
			top:0;
			left:250px;
			}
			.footerIn a{
				text-decoration:none;
				color:#FFF;}
		.song_playinfo a:nth-child(1){
			margin-left:0px;
			}
		.song_playinfo a:nth-child(2){
			margin-left:0px;}
		.song_playinfo a:nth-child(3){
			/*display:inline-block;*/
			margin-left:160px;
			}
		.song_playinfo a:nth-child(4){
			margin-left:-4px;
			}
		 .footerIn .song_progress{
			 width:420px;
			 height:4px;
			 background-color:rgba(255,255,255,0.2);
			position:absolute;
			 top:45px;
			 left:250px;
		     border-radius:3px;

			 }
			.song_progress .song_progress_in{
				 width:0px;
			 height:4px;
			 border-radius:3px;
			 
			 background-color:#FFF;
			display:inline-block;
			
			 
				
				} 
			  .song_progress_tar{
				  
				   width:14px;
			 height:14px;
			 border-radius:14px;
			 background-color:#FFF;
               position:absolute;
			  margin-top:-6px;
			 left:0px;
				  }
			 .footerIn .play_again{
				    
				     width: 26px;
                   height: 25px;
				  display:inline-block;
				 
				  background:url(images/player@2x.png);
				  background:-webkit-image-set(url("images/player@2x.png")2x) ;
				 background-position: 0px -207px; 
			 }
			 .play_again_change{
				  width: 26px;
                   height: 24px;
				  display:inline-block;
				  background:url(images/player@2x.png);
				  background:-webkit-image-set(url("images/player@2x.png")2x) ;
				 background-position: 0px -71.5px; 
				 
				 }
				 .footerIn .play_love{
				    width: 26px;
                   height: 25px;
				  display:inline-block;
				 
				  background:url(images/player@2x.png);
				  background:-webkit-image-set(url("images/player@2x.png")2x) ;
				 background-position: 0px -94px; 
				 
				 }
				 .footerIn .play_love_change{
					 width: 26px;
                   height: 25px;
				  display:inline-block;
				 
				  background:url(images/player@2x.png);
				  background:-webkit-image-set(url("images/player@2x.png")2x) ;
				 background-position: -30px -93px; 
					 
					 
					 }
			 .footerIn .play_down{
				    width: 26px;
                   height: 25px;
				  display:inline-block;
				  background:url(images/player@2x.png);
				  background:-webkit-image-set(url("images/player@2x.png")2x) ;
				 background-position: 0px -119px; 
				 
				 }
				
			  .footerIn .play_comment{
				  width: 26px;
                   height: 25px;
				  display:inline-block;
				  background:url(images/player@2x.png);
				  background:-webkit-image-set(url("images/player@2x.png")2x) ;
				 background-position: 0px -429.5px; 
				 
				 }
				.play_comment_change{
					
					 width: 26px;
                   height: 25px;
				  display:inline-block;
				  background:url(images/player@2x.png);
				  background:-webkit-image-set(url("images/player@2x.png")2x) ;
				 background-position: 0px -489.5px; 
					}
			 .footerIn .play_voice{
				 width:75px;
				  height:25px;
				  display:inline-block;
				  background:url(images/player@2x.png);
				  background:-webkit-image-set(url("images/player@2x.png")2x) ;
				 background-position: 0px -282px; 
				 
				 }
				.play_voice_change{
					
					width:75px;
				  height:25px;
				  display:inline-block;
				  background:url(images/player@2x.png);
				  background:-webkit-image-set(url("images/player@2x.png")2x) ;
				 background-position: 0px -311px;
					}
				.voice{
					display:inline-block;}
		       .voice .voice_log{
				  width: 27px;
                   height: 22px;
				  margin-right:100px;
				  display:inline-block;
				  background:url(images/player@2x.png);
				  background:-webkit-image-set(url("images/player@2x.png")2x) ;
				 background-position: 0px -143px; 
				   }
				 .voice .voice_log2{
					background-position: 0px -182px;  
					 } 
				 .voice .voice_progress{
			 width:62px;
			 height:2px;
			 background-color:rgba(255,255,255,0.2);
			position:absolute;
			 top:44px;
			 right:45px;
			 }
			.voice_progress .voice_progress_in{
			 width:62px;
			 height:2px;
			 background-color:#FFF; 
			display:inline-block;		
				} 
		  .voice_progress_tar{
				  
				   width:14px;
			 height:14px;
			 border-radius:14px;
			 background-color:#FFF;
             position:absolute;
			margin-top:-6px;
			 left:62px;
				  }
       .mask_img{
		   position:absolute;
		   top:0;
		   left:0;
		   background:url("https://y.gtimg.cn/music/photo_new/T002R300x300M000000xz4sw2fPuF7.jpg?max_age=2592000") no-repeat 50%;
		   background-size:cover;
		   z-index:-2;
		   width:100%;
		   height:100%;
		   filter:blur(100px);
		   transform: translateZ(0)
		   
		   }
		  .mask{
		 position:absolute;
		   top:0;
		   left:0; 
			z-index:-1;
		   width:100%;
		   height:100%;
		   background-clolor:rbga(0,0,0,0.35) ; 
			  
			  }